<template>
	<view class="pagesContent">
		<view class="pagesContentView">
			<view class="from">

				<view class="item">
					<view class="title">手机号 </view>
					<view class="inputView">
						<input type="number" v-model="username" maxlength="11" placeholder="输入手机号码"
							placeholder-class="plaCss" />
					</view>

				</view>
				<view class="item">
					<view class="title">密码 </view>
					<view class="inputView">
						<input type="text" password v-model="password" placeholder="请输入新密码"
							placeholder-class="plaCss" />
					</view>

				</view>
				<view class="item" style="margin-bottom: 17rpx;">
					<view class="title">确认密码</view>
					<view class="inputView">
						<input type="text" password v-model="rfpassword" placeholder="请再次输入密码"
							placeholder-class="plaCss" />
					</view>

				</view>
			</view>
			<view class="hint">6~16位密码，同时包含字母和数字</view>
			<view class="btn" @click="sbmitForm">确认绑定</view>
			<view class="">
				<adView></adView>
			</view>
		</view>

	</view>
</template>
<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	import {
		checkPhone
	} from "../../util/util.js"
	export default {
		data() {
			return {
				username: "",
				password: "",
				rfpassword: ""
			}
		},
		onShow() {
			if (!this.hasLogin) {
				this.goReLaunch("/pages/index/index")
			}
		},
		computed: {
			...mapGetters(["hasLogin", "userInfo"])
		},
		methods: {
			...mapActions(["commitGetUserInfo"]),
			//  提交表单
			sbmitForm() {
				if (!checkPhone(this.username)) {
					this.text("手机号格式不正确")
					return false
				}
				if (this.password == '') {
					this.text("密码不能为空")
					return false
				}
				if (this.rfpassword == '') {
					this.text("重复密码不能为空")
					return false
				}
				if (this.password != this.rfpassword) {
					this.text("两次密码不相同")
					return false
				}

				uni.showLoading({
					mask: false
				})
				let params = {
					username: this.username,
					password: this.password
				}

				this.$http.post("/api/user/bindUsername", params).then((res) => {
					if (res.code == 0) {
						this.commitGetUserInfo()
						this.text("绑定成功")
						setTimeout(() => {
							this.goBack()
						}, 500)
					} else {
						this.text(res.message)
					}
				})

			},

		}
	}
</script>
<style>
	page {

		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.pagesContent {

		padding-top: 61.54rpx;
		height: 100vh;
		background: linear-gradient(180deg, #E1EBFF 0%, #FAFCFF 100%);
		overflow: hidden;

		.pagesContentView {}
	}

	.from {
		width: 611.54rpx;
		height: 534.62rpx;
		margin: 0 auto 38.46rpx;

		.item {
			width: 100%;
			// height: 98rpx;
			margin-bottom: 38.46rpx;

			.title {
				height: 46.15rpx;
				font-size: 32.69rpx;
				font-weight: 500;
				color: #303030;
				line-height: 46.15rpx;
				margin-bottom: 23.08rpx;
			}

			.inputView {
				width: 611.54rpx;
				height: 84.62rpx;
				background: #FFFFFF;
				border-radius: 42.31rpx;
				overflow: hidden;

				input {
					display: block;
					background-color: rgba(0, 0, 0, 0);
					padding: 0 38.46rpx;
					height: 84.62rpx;
					line-height: 84.62rpx;
					color: #000000;
					font-size: 26.92rpx;

				}

				.plaCss {
					color: #999999;
				}
			}


		}


	}

	.hint {
		width: 611.54rpx;
		margin: 0 auto 96.15rpx;

		height: 24rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #1073F9;
		line-height: 24rpx;
	}

	.btn {
		margin: 0 auto 38.46rpx;
		width: 611.54rpx;
		height: 84.62rpx;
		background: #3970FF;
		border-radius: 42.31rpx;
		text-align: center;
		line-height: 84.62rpx;
		overflow: hidden;
		font-size: 30.77rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.adBox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 240rpx;
	}
</style>